<template>
    <cardComponent class="accountBalance" pageTitle="银联映射关系查询">
        <template slot="cardBody">
            <el-form
                class="searchForm"
                ref="searchForm"
                :model="searchForm"
                :inline="true"
                size="small"
                label-width="80px"
            >
                <el-form-item label="虚拟卡号:" label-position="left">
                    <el-input v-model="searchForm.DPANNO" disabled></el-input>
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    :loading="searchLoading"
                    @click="handleSearch"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                >重 置</el-button>
            </el-form>

            <!-- 查询信息显示 -->
            <el-table :data="tableData" width="100%" border stripe class="heard-bg business_table">
                <el-table-column label="实体卡号" prop="FPANNO"></el-table-column>
                <el-table-column label="设备卡号" prop="DPANNO"></el-table-column>
                <el-table-column label="设备卡状态" prop="CLS_FLAG">
                    <template slot-scope="scope">
                        <span v-if="scope.row.DPANSTAT === '1'">INITIAL（初始）</span>
                    </template>
                </el-table-column>
                <el-table-column label="挂失渠道">
                    <template slot-scope="scope">
                        <span v-if="scope.row.OPRCHNL === '00'">银行</span>
                        <span v-else-if="scope.row.OPRCHNL === '01'">Copper</span>
                        <span v-else-if="scope.row.OPRCHNL === '02'">银联</span>
                        <span v-else-if="scope.row.OPRCHNL === '03'">银行&&Copper</span>
                    </template>
                </el-table-column>
                <el-table-column label="渠道支付类型">
                    <span>{{ scope.row.CHNLPAYTYPE | getMethodTxt }}</span>
                </el-table-column>
                <el-table-column label="设备卡类型" prop="DPANTYPE">
                    <template slot-scope="scope">
                        <span v-if="scope.row.DPANTYPE === '1'">PBOC设备卡</span>
                        <span v-else-if="scope.row.DPANTYPE === '2'">MST设备卡</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备卡号2" prop="DPANNO2"></el-table-column>
            </el-table>
        </template>
    </cardComponent>
</template>
<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { CHNLPAYTYPES } from '@/utils/Contants'

export default {
    name: 'unionpayMapping',
    data() {
        return {
            title: 'accountBalance',
            searchLoading: false, // 确定按钮loading
            searchForm: {
                DPANNO: '', // 虚拟卡号
            },
            tableData: [],
        };
    },
    components: {
        cardComponent,
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
    }),

    filters: {
        getMethodTxt(val) {
            if (val) {
                const txt = val.trim();
                let text = '';
                CHNLPAYTYPES.forEach((item) => {
                    if (item.value === txt) {
                        text = item.label;
                    }
                });
                return text;
            }
        },
    },
    mounted() {
        this.searchForm.DPANNO = this.cardInfo_3004.CARDNO;
    },

    methods: {
        // 确定按钮点击处理事件
        handleSearch() {
            this.searchLoading = true;
            const appBody = {
                DPANNO: this.cardInfo_3004.CARDNO.trim() || '', // 卡号
                ISPEC: 'DPCHQ',
                ACTION: 'I',
            };
            this.defaultParams.body.appHead.source = 'CV';
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.TRXTYPE = '6646';
            defaultParams.body.appBody = appBody;
            this.$post.common.transPort(defaultParams).then((res) => {
                this.searchLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {
                        this.tableData = result.body.appBody.dataList || [];
                    } else {
                        this.$message.error(result.sysHead.rspMsg);
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },
        // 重置按钮点击事件处理
        handleReset() {
            this.$refs.searchForm.resetFields();
        },
    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.accountBalance {
    // background-color: #fff;
    // border-radius: 8px;
    min-height: 100%;
    overflow: hidden;
    .searchContent {
        margin-bottom: 16px;

        .infoItem {
            font-size: 16px;
            color: #999;
            text-align: left;
            margin-bottom: 20px;

            .title {
                color: #000;
                text-align: right;
                padding-right: 20px;
            }
        }
    }
}
</style>
